<template>
    <div class="star-background">
      <div class="graph-container">
        <RelationGraph ref="graphRef" :options="graphOptions">
          <template #node="{node}">
            <div class="knowledge-card">
              <div class="title">
                <span style="background-color:#7BE188;">#{{ node.data.title }}</span></div>
              <div class="description">{{ node.data.description }}</div>
            </div>
          </template>
        </RelationGraph>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref, onMounted } from 'vue';
  import type { RGOptions, RGJsonData, RGNode, RGUserEvent, RGLine, RGLink, RelationGraphComponent } from 'relation-graph-vue3';
  import RelationGraph from 'relation-graph-vue3';
  
  const graphJsonData = {
    "rootId": "a",
    "nodes": [
      {
        "id": "a",
        "text": "a",
        "data": {
          "title": "Python 基础",
          "description": "Python 是一种解释型、面向对象、动态数据类型的高级程序设计语言。"
        }
      },
      {
        "id": "b",
        "text": "b",
        "data": {
          "title": "数据结构",
          "description": "数据结构是计算机中存储、组织数据的方式，如列表、字典、集合等。"
        }
      },
      {
        "id": "c",
        "text": "c",
        "data": {
          "title": "算法",
          "description": "算法是解决问题的一系列步骤，如排序算法、搜索算法等。"
        }
      },
      {
        "id": "d",
        "text": "d",
        "data": {
          "title": "函数",
          "description": "函数是一段组织好的，可重复使用的，用来实现单一或相关联功能的代码块。"
        }
      },
      {
        "id": "e",
        "text": "e",
        "data": {
          "title": "模块",
          "description": "模块是一个包含 Python 定义和Python语句的文件。"
        }
      },
      {
        "id": "f",
        "text": "f",
        "data": {
          "title": "异常处理",
          "description": "异常处理是处理程序运行时发生的错误的过程。"
        }
      }
    ],
    "lines": [
      {
        "from": "a",
        "to": "b"
      },
      {
        "from": "a",
        "to": "c"
      },
      {
        "from": "a",
        "to": "d"
      },
      {
        "from": "a",
        "to": "e"
      },
      {
        "from": "a",
        "to": "f"
      }
    ]
  };
  
  export default defineComponent({
    name: 'DemoUseSlot2',
    components: { RelationGraph },
    setup() {
      const graphRef = ref<RelationGraphComponent | null>(null);
      const graphOptions: RGOptions = {
        allowSwitchLineShape: true,
        allowSwitchJunctionPoint: true,
        defaultJunctionPoint: 'border',
        defaultNodeShape: 1,
        defaultNodeBorderColor: '#ffffff',
        defaultNodeBorderWidth: 0,
        backgroundColor: 'rgba(0, 0, 0, 0)', // Make the graph background transparent
        defaultNodeColor: '#ffffff',
        defaultLineWidth: 0.5,
        // isMoveByParentNode: true,
        layout: {
        layoutName: 'force',
        from: 'left',
        maxLayoutTimes: 30000,
        force_node_repulsion: 3,
        force_line_elastic: 3
    }
        // You can set other options here
      };
  
      onMounted(() => {
        showGraph();
      });
  
      const showGraph = async () => {
        const __graph_json_data: RGJsonData = graphJsonData;
        const graphInstance = graphRef.value!.getInstance();
        await graphInstance.setJsonData(__graph_json_data);
        await graphInstance.moveToCenter();
        await graphInstance.zoomToFit();
      };
  
      return {
        graphRef,
        graphOptions,
        showGraph,
      };
    },
  });
  </script>
  
  <style scoped lang="scss">
  .star-background {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background: #000000;
  }
  
  .star-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="none" /><g fill="white"><circle cx="10%" cy="20%" r="1" class="star" /><circle cx="20%" cy="30%" r="1" class="star" /><circle cx="30%" cy="10%" r="1" class="star" /><circle cx="40%" cy="50%" r="1" class="star" /><circle cx="50%" cy="70%" r="1" class="star" /><circle cx="60%" cy="40%" r="1" class="star" /><circle cx="70%" cy="60%" r="1" class="star" /><circle cx="80%" cy="80%" r="1" class="star" /><circle cx="90%" cy="90%" r="1" class="star" /></g></svg>');
    background-size: 100% 100%;
    pointer-events: none;
  }
  
  .graph-container {
    position: relative;
    height: 100%;
  }
  
  .knowledge-card {
    width: 100px;
    height: 80px;
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    // display: flex;
    // flex-direction: column;
    // justify-content: flex-start;
  }
  
  .title {
    font-size: 8px;
    margin-bottom: 5px;
    text-align: left;
    color: #f9faf9;
    font-family: "Microsoft YaHei", Arial, sans-serif;
  }
  
  .description {
    font-size: 8px;
    text-align: left;
    color: #000000;
    font-family: "Microsoft YaHei", Arial, sans-serif;
  }
  
  @keyframes twinkle {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
  
  .star {
    animation: twinkle 2s infinite ease-in-out;
  }
  </style>
  